<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <div class="btm_">
        短信模版
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row >
                <el-form-item label="notice_type" prop="noticeType" style="margin-right: 60px;">
                  <el-input v-model="form.noticeType" placeholder="请输入通知类型"/>
                </el-form-item>
                <el-form-item label="sms_type" prop="smsType">
                  <el-input v-model="form.smsType" placeholder="请输入短信类型"/>
                </el-form-item>
          </el-row>
          <el-row >
                <el-form-item label="template_name" prop="templateName" style="margin-right: 60px;">
                  <el-input v-model="form.templateName" placeholder="请输入模板名称"/>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                  <el-select v-model="form.state" placeholder="请输入状态">
                    <el-option label="0" value="0"/>
                    <el-option label="1" value="1"/>
                  </el-select>
                </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="template_id" prop="templateId">
                  <el-input v-model="form.templateId" placeholder="请输入模板id"/>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="template_content" prop="templateContent">
              <el-input  class="w500" type="textarea" :rows="2" v-model="form.templateContent" placeholder="模板内容"/>
            </el-form-item>
          </el-row>
        </el-form>
        <div  style="text-align: center;">
         <el-button type="primary" icon="el-icon-search" size="mini" @click="submitForm">新增</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </div>
      <div class="btm_ margin_top20">
        SmsTask生成脚本
      </div>
      <div style="margin: 0 0 10px 100px;color: #606266;">
         e.g. : INSERT INTO sms_task ( notice_type, sms_type, country_code, phone, content )+()
      </div>
      <el-form-item label="sql脚本" prop="countryCode">

        <el-input
         class="w500"
          type="textarea"
          :rows="6"
          v-model="sqlStr"
          placeholder=""
          clearable
          size="small"
          @keyup.enter.native="generateSmsTaskFun"
        />
      </el-form-item>
      <div style="text-align: center;">
        <el-button type="primary" icon="el-icon-search" size="mini" :disabled="sqlStr == '' ? true :false" @click="generateSmsTaskFun">执行sql脚本</el-button>
        <el-button icon="el-icon-refresh" v-if="sendSmsStatus" size="mini" @click="sendSmsFun">发送短信</el-button>
      </div>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label=""  required>
          <el-upload ref="field101" :file-list="field101fileList" :action="field101Action"
                     :before-upload="field101BeforeUpload">
            <el-button size="small" type="primary" icon="el-icon-upload" >上传 Excel</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-row>

  </div>
</template>

<script>
import {sendSms, generateSmsTask, smsTemplate,} from "@/api/business/sms_sql";
import Editor from '@/components/Editor';

export default {
  props: [],
  name: "Sms_send_log",
  components: {
    Editor,
  },
  data() {
    return {
      formData: {
        field101: null,
      },
      field101Action: process.env.VUE_APP_BASE_API+'/bizsys/sms_template/import',
      field101fileList: [],
      sendSmsStatus:false,
      sqlStr:'',
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        sms_type:'',
        pageNum: 1,
        pageSize: 10,
        countryCode: null,
        phoneNumber: null,
        templateId: null,
      },
      // 表单参数
      form: {
        noticeType:"",
        smsType:"",
        state:"",
        templateName:"",
        templateId:"",
        templateContent:"",
      },
      // 表单校验
      rules: {
        noticeType: [
          {required: true, message: "Required", trigger: "blur"}
        ],
        smsType: [
          {required: true, message: "Required", trigger: "blur"}
        ],
        state: [
          {required: true, message: "Required", trigger: "change"}
        ],
        templateName: [
          {required: true, message: "Required", trigger: "blur"}
        ],
        templateId:[
          {required: true, message: "Required", trigger: "blur"}
        ],
        templateContent:[
          {required: true, message: "Required", trigger: "blur"}
        ],
      }
    };
  },
  created() {

  },
  methods: {
    sendSmsFun(){
     var main = this
      sendSms().then(response => {
          console.log(response,'response')
          if(response.code == 200){
                 main.msgSuccess(response.msg);
          }else{
                 main.msgError(response.msg);
          }
      });
    },
    generateSmsTaskFun(){
      var main = this
      generateSmsTask(this.sqlStr).then(response => {
          console.log(response,'response')
          if(response.code == 200){
                 main.sendSmsStatus = true
                 main.msgSuccess(response.msg);
          }else{
                 main.msgError(response.msg);
          }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        countryCode: null,
        phoneNumber: null,
        templateId: null,
        remark: null,
        createTime: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      var main = this
      this.$refs["form"].validate(valid => {
        if (valid) {

              smsTemplate(this.form).then(response => {
                  console.log(response,'response')
                  if(response.code == 200){
                      main.msgSuccess(response.msg);
                  }else{
                      main.msgError(response.msg);
                  }
              });
        }
      });
    },
    submitFormFile() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        uploadFile(this.formData).then(response => {
          debugger
          this.$modal.msgSuccess("提交成功");
          this.open = false;
          this.getList();
        });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field101BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
  }
};
</script>
<style type="text/css">
  .btm_{
    border-bottom: 1px solid #cccccc;
    padding: 10px 0 ;
    margin: 10px 0 ;
  }
  .margin_top20{
    margin-top: 20px;
  }
  .w500 .el-textarea__inner{
    width:500px !important;
  }
</style>
